body {
	background: url('../img/bg.gif') top repeat-x;
	font: normal 12px Arial, Helvetica, sans-serif;
}

div#main {
	width: 1000px;
	margin: 0 auto;
}

div#header h1 {
	margin: 20px 0;
}
div#header h1 a {
	display: block;
	text-indent: -9999px;
	width: 480px;
	height: 80px;
	background: url('../img/logo.png') no-repeat;
}

/* -------------------------------------- TABLE -------------------------------------- */

div#table {
	position: relative;
	height: 500px;
	margin-bottom: 100px;
	background: url('../img/table.png') center top no-repeat;
	text-shadow: rgba(0,0,0,0.5) 1px 1px 1px;
}
div#table div.notification h2 {
	color: white;
	font-size: 22px;
	line-height: 40px;
	font-weight: normal;
}
div#table div.notification h3{
	color:black;
	
}

/* -------------------------------------- USERS -------------------------------------- */

div.users ul li {
	position: absolute;
	display: block;
	width: 150px;
	color: white;
	background: url('../img/user_bg.png');
	border: 2px solid transparent;
}
div.users ul li.active,
div.users ul li:hover { 
	border: 2px solid #6F8FB0;
}
div.users ul li h3 {
	line-height: 30px;
	font-size: 20px;
	font-weight: normal;
	overflow: hidden;
}
div.users ul li p {
	line-height: 18px;
}
div.users ul li h3 {
	padding: 0 10px;
}
div.users ul li p {
	border-top: 1px solid #6F8FB0;
}
div.users ul li span.balance,
div.users ul li span.status {
	padding: 0 10px;
}
div.users ul li span.status {
	font-weight: bold;
}
div.users ul li p.external {
	position: relative;
	border-top: 0;
}
div.users ul li span.bid,
div.users ul li span.role,
div.users ul li span.cards {
	position: absolute;
}
div.users ul li span.bid,
div.users ul li span.role {
	left: 10px;
	
}
div.users ul li span.bid {
	font-size: 10px;
	line-height: 18px;
	bottom: -23px;
	padding-left: 20px;
	background: url('../img/chip.png') left center no-repeat;
}
div.users ul li span.role {
	bottom: -50px;
	font-size: 12px;
	display: block;
	line-height: 26px;
	width: 24px;
	height: 24px;
	font-weight: bold;
	text-align: center;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;
	border: 1px solid black;
}

div.users ul li span.role.dealer {
	background: #CC3333;
	color: black;
	font-size: 17px;
}
div.users ul li span.role.bigblind {
	background: #3333CC;
	color: silver;
}
div.users ul li span.role.smallblind {
	background: #FFFF66;
	color: black;	
}
div.users ul li span.cards { 
	bottom: -40px;
	right: 10px; }
div.users ul li span.cards b {
	display: block;
	float: right;
	font-size: 13px;
	text-shadow: white 0 0 1px;
	margin-right: 5px;
	padding-left: 3px;
	width: 22px;
	height: 35px;
	background-color: white;
	background-position: 7px 17px;
	background-repeat: no-repeat;
}
div.users ul li span.cards b.deck { background: url('../img/deck_small.gif') white 2px 2px no-repeat; }
div.users ul li span.cards b.spade { background-image: url('../img/leap/spade.gif'); }
div.users ul li span.cards b.club { background-image: url('../img/leap/club.gif'); }
div.users ul li span.cards b.diam { background-image: url('../img/leap/diam.gif'); }
div.users ul li span.cards b.heart { background-image: url('../img/leap/heart.gif'); }
div.users ul li span.cards b.red { color: #CB2929; }
div.users ul li span.cards b.black { color: #000000; }
div.users ul li span.action input {
	font-size: 11px;
	display: inline-block;
	margin: 0 0 2px 2px;
}
div.users ul li span.action input.allIn {
	width: 50px;
}
div.users ul li span.action input.call {
	width: 42px;
}
div.users ul li span.action input.fold {
	width: 50px;
}
div.users ul li.user-1	{ top: 0;					left: 175px; }
div.users ul li.user-2	{ top: 0;					left: 425px; }
div.users ul li.user-3	{ top: 0;					right: 175px; }
div.users ul li.user-4	{ top: 140px;			right: 0; }
div.users ul li.user-5	{ bottom: 140px;	right: 0; }
div.users ul li.user-6	{ bottom: 0;			right: 175px; }
div.users ul li.user-7	{ bottom: 0;			left: 425px; }
div.users ul li.user-8	{ bottom: 0;			left: 175px; }
div.users ul li.user-9	{ bottom: 140px;	left: 0; }
div.users ul li.user-10	{ top: 140px;			left: 0; }

/* -------------------------------------- CARDS -------------------------------------- */

div.cards {
	text-align: center;
	padding-top: 170px;	
}
div.cards ul li {
	display: inline-block;
	text-indent: -9999px;
	width: 70px;
	height: 96px;
	margin: 0 5px;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: white;
}div.blind ul li {
	display: inline-block;
	text-indent: -9999px;
	width: 70px;
	height: 96px;
	margin: 0 5px;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: white;
}
div.cards ul li.card { background-image: url('../img/deck.gif'); }
/* -------------------------------------- HEARTS -------------------------------------- */
div.cards ul li.card-h-2 { background-image: url('../img/cards/hearts/2.png'); }
div.cards ul li.card-h-3 { background-image: url('../img/cards/hearts/3.png'); }
div.cards ul li.card-h-4 { background-image: url('../img/cards/hearts/4.png'); }
div.cards ul li.card-h-5 { background-image: url('../img/cards/hearts/5.png'); }
div.cards ul li.card-h-6 { background-image: url('../img/cards/hearts/6.png'); }
div.cards ul li.card-h-7 { background-image: url('../img/cards/hearts/7.png'); }
div.cards ul li.card-h-8 { background-image: url('../img/cards/hearts/8.png'); }
div.cards ul li.card-h-9 { background-image: url('../img/cards/hearts/9.png'); }
div.cards ul li.card-h-10 { background-image: url('../img/cards/hearts/10.png'); }
div.cards ul li.card-h-j { background-image: url('../img/cards/hearts/j.png'); }
div.cards ul li.card-h-q { background-image: url('../img/cards/hearts/q.png'); }
div.cards ul li.card-h-k { background-image: url('../img/cards/hearts/k.png'); }
div.cards ul li.card-h-a { background-image: url('../img/cards/hearts/a.png'); }
/* -------------------------------------- DIAMONDS -------------------------------------- */
div.cards ul li.card-d-2 { background-image: url('../img/cards/diamonds/2.png'); }
div.cards ul li.card-d-3 { background-image: url('../img/cards/diamonds/3.png'); }
div.cards ul li.card-d-4 { background-image: url('../img/cards/diamonds/4.png'); }
div.cards ul li.card-d-5 { background-image: url('../img/cards/diamonds/5.png'); }
div.cards ul li.card-d-6 { background-image: url('../img/cards/diamonds/6.png'); }
div.cards ul li.card-d-7 { background-image: url('../img/cards/diamonds/7.png'); }
div.cards ul li.card-d-8 { background-image: url('../img/cards/diamonds/8.png'); }
div.cards ul li.card-d-9 { background-image: url('../img/cards/diamonds/9.png'); }
div.cards ul li.card-d-10 { background-image: url('../img/cards/diamonds/10.png'); }
div.cards ul li.card-d-j { background-image: url('../img/cards/diamonds/j.png'); }
div.cards ul li.card-d-q { background-image: url('../img/cards/diamonds/q.png'); }
div.cards ul li.card-d-k { background-image: url('../img/cards/diamonds/k.png'); }
div.cards ul li.card-d-a { background-image: url('../img/cards/diamonds/a.png'); }
/* -------------------------------------- CLUBS -------------------------------------- */
div.cards ul li.card-c-2 { background-image: url('../img/cards/clubs/2.png'); }
div.cards ul li.card-c-3 { background-image: url('../img/cards/clubs/3.png'); }
div.cards ul li.card-c-4 { background-image: url('../img/cards/clubs/4.png'); }
div.cards ul li.card-c-5 { background-image: url('../img/cards/clubs/5.png'); }
div.cards ul li.card-c-6 { background-image: url('../img/cards/clubs/6.png'); }
div.cards ul li.card-c-7 { background-image: url('../img/cards/clubs/7.png'); }
div.cards ul li.card-c-8 { background-image: url('../img/cards/clubs/8.png'); }
div.cards ul li.card-c-9 { background-image: url('../img/cards/clubs/9.png'); }
div.cards ul li.card-c-10 { background-image: url('../img/cards/clubs/10.png'); }
div.cards ul li.card-c-j { background-image: url('../img/cards/clubs/j.png'); }
div.cards ul li.card-c-q { background-image: url('../img/cards/clubs/q.png'); }
div.cards ul li.card-c-k { background-image: url('../img/cards/clubs/k.png'); }
div.cards ul li.card-c-a { background-image: url('../img/cards/clubs/a.png'); }
/* -------------------------------------- SPADES -------------------------------------- */
div.cards ul li.card-s-2 { background-image: url('../img/cards/spades/2.png'); }
div.cards ul li.card-s-3 { background-image: url('../img/cards/spades/3.png'); }
div.cards ul li.card-s-4 { background-image: url('../img/cards/spades/4.png'); }
div.cards ul li.card-s-5 { background-image: url('../img/cards/spades/5.png'); }
div.cards ul li.card-s-6 { background-image: url('../img/cards/spades/6.png'); }
div.cards ul li.card-s-7 { background-image: url('../img/cards/spades/7.png'); }
div.cards ul li.card-s-8 { background-image: url('../img/cards/spades/8.png'); }
div.cards ul li.card-s-9 { background-image: url('../img/cards/spades/9.png'); }
div.cards ul li.card-s-10 { background-image: url('../img/cards/spades/10.png'); }
div.cards ul li.card-s-j { background-image: url('../img/cards/spades/j.png'); }
div.cards ul li.card-s-q { background-image: url('../img/cards/spades/q.png'); }
div.cards ul li.card-s-k { background-image: url('../img/cards/spades/k.png'); }
div.cards ul li.card-s-a { background-image: url('../img/cards/spades/a.png'); }

/* -------------------------------------- CONTENT -------------------------------------- */
#content {
	padding: 0 10px;
	background: url('../img/tr_black_50.png');
}
#gameActions {
	height: 40px;
	color: white;
}
#gameActions p {
	line-height: 40px;
}
#gameActions input[type="button"] {
	float: left;
	line-height: 20px;
	height: 20px;
	margin: 10px 0 0 3px;
	padding: 0 20px;
}

/* -------------------------------------- CHAT MESSAGES -------------------------------------- */
div#chat {
	background-color: white;
	padding-top: 20px;
}
div#chat div.messages {
	margin: 0 20px;
	height: 200px; /* remove if dont need scrollbars */
	overflow: scroll;
	overflow-x: hidden;
}
div#chat div.messages ul li {
	display: block;
	border-top: 1px dashed silver;
	padding-right: 10px;
	margin-bottom: 10px;
}
div#chat div.messages ul li:first-child {
	border-top: 0;
}
div#chat div.messages ul li p {
	line-height: 16px;
}
div#chat div.messages ul li h3,
div#chat div.messages ul li small {
	line-height: 30px;
}
div#chat div.messages ul li h3 {
	font-size: 14px;
}
div#chat div.messages ul li small {
	float: right;
	color: gray;
	font-size: 10px;
	display: block;
}
/* -------------------------------------- ADD MESSAGE -------------------------------------- */
div#chat div.addMessage {
	height: 20px;
	margin-top: 10px;
	padding: 10px 20px;
	background-color: #E1EFFC;
	border-top: 1px solid silver;
	border-bottom: 1px solid silver;
}
div#chat div.addMessage label {
	width: 70px;
	display: block;
}
div#chat div.addMessage label,
div#chat div.addMessage input {
	height: 20px;
	line-height: 20px;
	float: left;
}
div#chat div.addMessage input[type="text"] {
	border: 0;
	background: transparent;
	border-bottom: 1px dotted black;
	width: 770px;
}
div#chat div.addMessage input[type="submit"] {
	float: right;
	width: 80px;
}
/* -------------------------------------- FOOTER NAVIGATION -------------------------------------- */
div#chat div.footerNav {
	padding: 20px;
}
div#chat div.footerNav ul {
	text-align: right;
}
div#chat div.footerNav ul li {
	display: inline;
}
div#chat div.footerNav ul li a {
	margin-left: 30px;
	display: inline-block;
	line-height: 16px;
	color: black;
}
div#chat div.footerNav ul li a:hover {
	border-bottom: 1px dashed black;
}

